<!DOCTYPE html>
<html lang="en">

<body data-type="index">
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <div th:include="common/header :: atmHead"></div>
        <!-- 风格切换 -->

        <!-- 侧边导航栏 -->
        <div th:include="common/left :: atmLeft"></div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div id="cardsDiv" class="row  am-cf">
                </div>

               

 <div class="am-u-sm-12 am-u-md-12 am-u-lg-6">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">最近十笔流水</div>
                                <div class="widget-function am-fr">
                                    
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-bordered am-table-radius am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody id="flowsDIV">

                                        <!-- more data -->
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>


    <script>

        $('#homeA').addClass('active')

        function loadTop10Flow() {
            $.ajax({
                type : 'GET',
                dataType : 'JSON',
                url : '/card/queryFlowTop10',
                data : {},
                success : function (result) {
                    if (result.code != 1000){
                        alert(result.message);
                        return;
                    }

                    var flowHtml = '';
                    var flows = result.data;
                    for (var i=0; i<flows.length; i++) {
                        var flow = flows[i]
                        flowHtml += '<tr class="gradeX">\n' +
                            '                                            <td>'+flow.cardNum+'</td>\n' +
                            '                                            <td>'+flow.amount+'</td>\n' +
                            '                                            <td>'+flow.remark+'</td>\n' +
                            '                                            <td>'+flow.createTime+'</td>\n' +
                            '                                        </tr>';
                    }

                    $('#flowsDIV').html(flowHtml);
                }
            });
        }

        loadTop10Flow();

        function loadCards() {
            $.ajax({
                type : 'GET',
                dataType : 'JSON',
                url : '/card/queryMyCard',
                data : {
                },
                success : function (result) {
                    if (result.code != 1000){
                        alert(result.message);
                        return;
                    }

                    var cards = result.data;

                    var cardHtml = '';
                    for (var i=0; i<cards.length; i ++) {
                        var card = cards[i];
                        cardHtml += '<div class="am-u-sm-12 am-u-md-6 am-u-lg-4">\n' +
                            '                        <div class="widget widget-primary am-cf">\n' +
                            '                            <div class="widget-statistic-header">\n' +
                            '                                '+card.cardNum+'\n' +
                            '                            </div>\n' +
                            '                            <div class="widget-statistic-body">\n' +
                            '                                <div class="widget-statistic-value">\n' +
                            '                                    ￥'+card.balance+'\n' +
                            '                                </div>\n' +
                            '                                <div class="widget-statistic-description">\n' +
                            '                                    \n' +
                            '                                </div>\n' +
                            '                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '                    </div>';

                    }

                    $('#cardsDiv').html(cardHtml);
                }
            });
        }
        loadCards();
    </script>

</body>

</html>